<template>
  <div class="main">
    <div class="mianColor">
      <div class="top classificationTile">
        <div>AI研判报告预览</div>
        <a-button type="primary" @click="saveImgClick()">报告导出</a-button>
      </div>
      <div class="report">
        <div style="text-align: center" class="sTypeface smallOne">
          {{ previewList.authXqdwName }}警情智能研判分析报告
          <br />
          <br />
          【{{ previewList.year }}】第{{ previewList.month }}期
        </div>
        <br />
        <br />
        <div class="zhDate numberThree">
          <div>{{ previewList.authXqdwNames }}编</div>
          <div>{{ previewList.exportData }}</div>
        </div>
        <br />
        <div style="text-align: center" class="sTypeface smallTwo">
          {{ codeNames }}警情人工智能专题分析报告
        </div>
        <br />
        <div class="fTypeface numberThree">
          &emsp;&emsp;{{ previewList.authXqdwNames }}采用人工智能自然语言处理技术，通过对全辖区
          {{ previewList.dateRange }}的{{ result.ctCaseNum }}条警情进行语义分析挖掘，分析报告如下：
        </div>
        <div class="hTypeface numberThree">一、{{ codeNames }}警情AI识别</div>
        <div class="canvas_boxcard" id="mycanvas0">
          <a-card size="small">
            <template #title>
              <div class="classificationTile">
                <div>
                  <div style="text-align: center">
                    <img
                      src="@/assets/image/statistics/ai.svg"
                      alt=""
                      style="height: 40px; position: absolute; left: -3px; top: -3px"
                    />
                    <span style="margin-left: 20px">
                      {{ `【${analysisName}】 警情分析` }}
                    </span>
                  </div>
                </div>
                <div>
                  <div style="text-align: center">
                    AI总量：
                    <span style="color: #f90; font-size: 20px; margin-right: 20px">
                      {{ aiCaseNum }}
                    </span>
                    <span v-if="result.ayCaseNum != null">
                      传统总量：
                      <span style="color: #f90; font-size: 20px; margin-right: 20px">
                        {{ result.ayCaseNum }}
                      </span>
                      ( 智能挖掘增量
                      <span style="color: #f90; font-size: 20px">{{ result.increaseNum }}</span>
                      起 )
                    </span>
                  </div>
                </div>
                <div></div>
              </div>
            </template>

            <a-row :gutter="10">
              <a-col :span="8">
                <a-card style="height: 520px" size="small" class="echatsAI">
                  <template #title>
                    <span class="iconfont icon-AI icon"></span>
                    <span class="canvasName" style="margin-left: 50px">
                      {{ `【${analysisName}】智能分类分析 ` }}
                    </span>
                  </template>
                  <warningPie
                    v-if="classifyList.length"
                    :data="classifyList"
                    :height="400"
                    :fieldNames="{
                      name: 'classifyName',
                      value: 'caseNum',
                    }"
                    :defalutOptions="classifyOptions"
                    title="警情数量"
                  >
                    <template v-slot:titles></template>
                  </warningPie>
                  <a-empty style="margin-top: 100px" v-else />
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card style="height: 520px" size="small" class="echatsJie">
                  <template #title>
                    <span class="iconfont icon-jiejing icon"></span>
                    <span class="canvasName" style="margin-left: 50px">接警所覆盖类别</span>
                  </template>
                  <warningPie
                    v-if="aiCallList.length"
                    :data="aiCallList"
                    :height="400"
                    :fieldNames="{
                      name: 'callSummaryName',
                      value: 'caseNum',
                    }"
                    :defalutOptions="callOptions"
                  >
                    <template v-slot:title>
                      <span class="callSize">接</span>
                    </template>
                  </warningPie>
                  <a-empty style="margin-top: 100px" v-else />
                  <div style="color: #000">
                    <div style="margin-left: 30px">
                      {{ analysisName }}类警情：
                      <span class="green">
                        {{ statistics.callCaseNum }}
                      </span>
                      起，占比
                      <span class="green">
                        {{ statistics.callPercent }}
                      </span>
                      <br />
                      ”其他类”警情：
                      <span class="green">
                        {{ statistics.callOtherCaseNum }}
                      </span>
                      起，占比
                      <span class="green">
                        {{ statistics.callOtherPercent }}
                      </span>
                    </div>
                  </div>
                </a-card>
              </a-col>
              <a-col :span="8">
                <a-card style="height: 520px" size="small" class="echatsFan">
                  <template #title>
                    <span class="iconfont icon-fankui1 icon"></span>
                    <span class="canvasName" style="margin-left: 50px">反馈所覆盖类别</span>
                  </template>
                  <warningPie
                    v-if="aiDealList.length"
                    :data="aiDealList"
                    :height="400"
                    :fieldNames="{
                      name: 'dealSummaryName',
                      value: 'caseNum',
                    }"
                    :defalutOptions="dealOptions"
                  >
                    <template v-slot:title>
                      <span class="dealSize">反</span>
                    </template>
                  </warningPie>
                  <a-empty style="margin-top: 100px" v-else />
                  <div style="color: #000">
                    <div style="margin-left: 30px">
                      {{ analysisName }}类警情：
                      <span class="green">
                        {{ statistics.dealCaseNum }}
                      </span>
                      起，占比
                      <span class="green">
                        {{ statistics.dealOtherPercent ? statistics.dealOtherPercent : 0 }}
                      </span>
                      <br />
                      ”其他类”警情：
                      <span class="green">
                        {{ statistics.dealOtherCaseNum }}
                      </span>
                      起，占比
                      <span class="green">
                        {{ statistics.dealOtherPercent }}
                      </span>
                    </div>
                  </div>
                </a-card>
              </a-col>
            </a-row>
          </a-card>
        </div>
        <div class="fTypeface numberThree">&emsp;&emsp;{{ previewList.tovalue }}</div>
        <div v-if="codeNames == '全部'" class="fTypeface numberThree">
          &emsp;&emsp;通过AI识别，全部警情中
          <span v-for="(item, index) in classifyList.slice(0, 3)">
            “{{ item.classifyName }}”类为{{ item.caseNum }}起，占比{{ item.percent }}%{{
              index + 1 == classifyList.slice(0, 3).length ? '。' : '；'
            }}
          </span>
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;在AI模型识别的{{ aiCaseNum }}起{{ codeNames }}警情中接警分为
          <span v-for="(item, index) in aiCallList.slice(0, 3)">
            “{{ item.callSummaryName }}”类为{{ item.caseNum }}起，占比{{ item.percent }}%{{
              index + 1 == aiCallList.slice(0, 3).length ? '。' : '；'
            }}
          </span>
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;反馈分为
          <span v-for="(item, index) in aiDealList.slice(0, 3)">
            “{{ item.dealSummaryName }}”类为{{ item.caseNum }}起，占比{{ item.percent }}%{{
              index + 1 == aiDealList.slice(0, 3).length ? '。' : '；'
            }}
          </span>
        </div>
        <div class="hTypeface numberThree">二、{{ codeNames }}警情AI趋势分析</div>
        <div v-if="result.callList" class="fTypeface numberThree">
          &emsp;&emsp;
          <span class="kTypeface" style="font-weight: bold">{{ codeNames }}警情人工接警</span>
          {{ result.ayCaseNum }}起，{{ previewList.cttovalue }}。总体趋势图如下：
        </div>
        <div v-if="result.callList" style="text-align: center" class="fTypeface numberThree">
          人工接警趋势图（{{ codeNames }}-同比）
        </div>
        <div class="canvas_boxcard" id="mycanvas1">
          <a-card v-if="result.callList" class="carTitle">
            <template #title>
              <div class="classificationTile">
                <div class="title canvasName">传统【{{ analysisName }}】警情趋势分析</div>
                <div style="text-align: center">
                  同比增长率：
                  <span
                    style="font-size: 20px"
                    v-if="result.trendList && result.trendList && result.trendList.dataList.length"
                  >
                    {{ result.trendList.yoyPercent }}
                  </span>
                </div>
                <div></div>
              </div>
            </template>
            <timeline-chart
              currentTheme="light"
              style="color: #000"
              :data="result.trendList.dataList"
              :height="400"
              :legend="['当前警情', '去年同期']"
              :type="dealFlag == '1' ? '接警' : '传统'"
              :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
              v-if="result.trendList && result.trendList && result.trendList.dataList.length"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span class="kTypeface" style="font-weight: bold">{{ codeNames }}警情AI模式识别</span>
          {{ aiCaseNum }}起，{{ previewList.aitovalue }}。总体趋势图如下：
        </div>
        <div style="text-align: center" class="fTypeface numberThree">
          AI识别趋势图（{{ codeNames }}-同比）
        </div>
        <div class="canvas_box" id="mycanvas2">
          <a-card>
            <template #title>
              <div class="classificationTile">
                <div>
                  <img
                    src="@/assets/image/statistics/ai.svg"
                    alt=""
                    style="height: 40px; position: absolute; left: -3px; top: -3px"
                  />
                  <span style="margin-left: 36px" class="cardTile">
                    <span class="canvasName">【{{ analysisName }}】警情趋势分析</span>
                  </span>
                </div>
                <div style="text-align: center">
                  同比增长率：
                  <span style="color: #f90; font-size: 20px">
                    {{ aiTrendList.yoyPercent }}
                  </span>
                </div>
                <div></div>
              </div>
            </template>

            <timeline-chart
              currentTheme="light"
              v-if="aiTrendList?.dataList?.length"
              :data="aiTrendList.dataList"
              :height="400"
              type="智能"
              :legend="['当前警情', '去年同期']"
              :fieldNames="{ name: 'dataDate', values: ['caseNum', 'yoyCaseNum'] }"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div v-if="result.callList" style="text-align: center" class="fTypeface numberThree">
          人工接警对比AI识别趋势图（{{ codeNames }}）
        </div>
        <div class="canvas_box" id="mycanvas3">
          <a-card v-if="result.callList">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span class="cardTile" style="margin-left: 36px">
                  <span class="canvasName">【{{ analysisName }}】警情智能、传统对比趋势图</span>
                </span>
              </div>
            </template>
            <bilinear
              v-if="result?.trendList?.dataList && aiTrendList?.dataList"
              currentTheme="light"
              :data="result.trendList.dataList"
              :aidata="aiTrendList.dataList"
              :height="400"
              :legend="['智能', '传统']"
              :fieldNames="{ name: 'dataDate', values: ['caseNum'] }"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div class="hTypeface numberThree">三、{{ codeNames }}警情辖区分布</div>
        <div v-if="result.callList">
          <div class="fTypeface numberThree">
            &emsp;&emsp;
            <span class="kTypeface" style="font-weight: bold">{{ codeNames }}警情人工接警</span>
            {{ result.ayCaseNum }}起，高发辖区{{
              result.xqdwList.slice(0, 5).length == 5 ? 'TOP5' : ''
            }}为：
          </div>
          <ul v-if="result?.xqdwList?.length > 0" style="list-style: none">
            <li v-for="(item, index) in result.xqdwList.slice(0, 5)">
              {{ index + 1 }}、 {{ item.xqdwName }}（{{ item.caseNum }}起）
            </li>
          </ul>
          <div style="text-align: center" class="fTypeface numberThree">
            人工接警辖区分布图（{{ codeNames }}）
          </div>
        </div>
        <div class="canvas_box" id="mycanvas4">
          <a-card v-if="result.xqdwList">
            <template #title>
              <div style="margin-left: 22px">
                <span class="cardTile canvasName">传统【{{ analysisName }}】警情辖区单位分布</span>
              </div>
            </template>
            <bar
              v-if="result?.xqdwList?.length"
              currentTheme="light"
              :data="result.xqdwList"
              :height="200"
              :fieldNames="{
                name: 'xqdwName',
                value: 'caseNum',
              }"
              :type="dealFlag == '1' ? '接警' : '传统'"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span class="kTypeface" style="font-weight: bold">{{ codeNames }}警情AI模式识别</span>
          {{ aiCaseNum }}起，高发辖区{{ navData.slice(0, 5).length == 5 ? 'TOP5' : '' }}为：
        </div>
        <ul v-if="navData.length" style="list-style: none">
          <li v-for="(item, index) in navData.slice(0, 5)">
            {{ index + 1 }}、 {{ item.xqdwName }}（{{ item.caseNum }}起）
          </li>
        </ul>
        <div v-if="result.callList">
          &emsp;&emsp;其中
          <span v-for="(item, index) in previewList.nameChange">
            “{{ item }}”{{ index + 1 == previewList.nameChange.length ? '' : '、' }}
          </span>
          排名较人工接警排名有变化，请关注。
        </div>
        <div style="text-align: center" class="fTypeface numberThree">
          AI识别辖区分布（{{ codeNames }}）
        </div>
        <div class="canvas_box" id="mycanvas5">
          <a-card class="carTitle" size="small">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span class="cardTile" style="margin-left: 36px">
                  <span class="canvasName">【{{ analysisName }}】警情辖区单位分布</span>
                </span>
              </div>
            </template>

            <bar
              currentTheme="light"
              :data="navData"
              :height="200"
              :fieldNames="{
                name: 'xqdwName',
                value: 'caseNum',
              }"
              type="智能"
              v-if="navData.length"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div style="text-align: center" class="fTypeface numberThree">
          人工接警对比AI识别辖区分布（{{ codeNames }}）
        </div>
        <div class="canvas_box" id="mycanvas6">
          <a-card v-if="visibleDifference">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span class="cardTile" style="margin-left: 36px">
                  <span class="canvasName">【{{ analysisName }}】警情智能、传统数量差异统计</span>
                </span>
              </div>
            </template>
            <barEcharts :option="differenceData" :height="300" @clickEchart="handleBar" />
          </a-card>
        </div>
        <div class="hTypeface numberThree">四、{{ codeNames }}警情AI要素分析</div>
        <div class="fTypeface numberThree">&emsp;&emsp;通过AI模型对涉警要素自动提取及分析。</div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span class="kTypeface" style="font-weight: bold">
            {{ codeNames }}警情涉警人员年龄段分析
          </span>
          如下：
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span v-for="item in previewList.personnelLeft">
            {{ item.name }}{{ item.value }}，占比{{ item.percent }}{{ item.symbol }}
          </span>
        </div>
        <div class="canvas_box" id="mycanvas7">
          <a-card size="small" class="carTitle" style="height: 316px">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span class="cardTile" style="margin-left: 36px">
                  <span class="canvasName">人员年龄段分析</span>
                </span>
              </div>
            </template>
            <transverseBar
              currentTheme="light"
              :height="240"
              :data="personnelLeft"
              v-if="personnelLeft.length"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span class="kTypeface" style="font-weight: bold">
            {{ codeNames }}警情涉警人员性别分析
          </span>
          如下：
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span v-for="item in previewList.personnelRight">
            {{ item.name }}{{ item.value }}，占比{{ item.percent }}{{ item.symbol }}
          </span>
        </div>
        <div class="canvas_box" id="mycanvas8">
          <a-card size="small" class="carTitle" style="height: 316px">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span class="cardTile canvasName" style="margin-left: 36px">人员性别分析</span>
              </div>
            </template>
            <transverseBar
              currentTheme="light"
              :height="240"
              :data="personnelRight"
              v-if="personnelRight.length"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span class="kTypeface" style="font-weight: bold">
            {{ codeNames }}警情报警高发时间段分析
          </span>
          如下：
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;高发时间段{{ previewList.dealList.length == 3 ? 'TOP3' : '' }}为：
        </div>
        <div class="fTypeface numberThree" v-for="(item, index) in previewList.dealList">
          &emsp;&emsp; {{ index + 1 }}、 {{ item.name }}{{ groupFieldTime(groupField)
          }}{{ item.value }}起，占比{{ item.percent }}%；
        </div>
        <div class="canvas_box" id="mycanvas9">
          <a-card style="height: 300px" class="carTitle" size="small">
            <template #title>
              <div style="display: flex">
                <div>
                  <img
                    src="@/assets/image/statistics/ai.svg"
                    alt=""
                    style="height: 40px; position: absolute; left: -3px; top: -3px"
                  />
                  <span class="cardTile" style="margin-left: 36px">
                    <span>报警时段分析</span>
                  </span>
                </div>
                <div style="display: flex; margin-left: 20px">
                  <div>
                    <a-select
                      default-value="dayRange"
                      style="width: 120px; color: #000"
                      @change="handleChange"
                    >
                      <a-select-option value="hour">小时</a-select-option>
                      <a-select-option value="day">天</a-select-option>
                      <a-select-option value="week">周</a-select-option>
                      <a-select-option value="month">月</a-select-option>
                      <a-select-option value="year">年</a-select-option>
                      <a-select-option value="dayRange">时间段</a-select-option>
                    </a-select>
                  </div>
                </div>
              </div>
            </template>
            <barTime
              currentTheme="light"
              style="margin-top: 30px"
              :data="dealList"
              :height="200"
              :fieldNames="{
                name: 'name',
                value: 'value',
              }"
              v-if="dealList.length"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;
          <span class="kTypeface" style="font-weight: bold">
            {{ codeNames }}警情报警高发热词分析
          </span>
          如下：
        </div>
        <div class="fTypeface numberThree">
          &emsp;&emsp;高发热词{{ queryHotWordList.slice(0, 10).length == 10 ? 'TOP10' : '' }}为：
        </div>
        <table class="tabrc">
          <tr>
            <th>序号</th>
            <th>热词</th>
            <th>频次</th>
          </tr>
          <tr v-for="(item, index) in queryHotWordList.slice(0, 10)">
            <td>{{ index + 1 }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.value }}</td>
          </tr>
        </table>
        <div style="text-align: center" class="fTypeface numberThree">
          警情热词分布图（{{ codeNames }}）
        </div>
        <div class="canvas_box" id="mycanvas10">
          <a-card style="height: 300px" class="carTitle" size="small">
            <template #title>
              <div>
                <img
                  src="@/assets/image/statistics/ai.svg"
                  alt=""
                  style="height: 40px; position: absolute; left: -3px; top: -3px"
                />
                <span class="cardTile canvasName" style="margin-left: 36px">
                  {{ `【${analysisName}】警情热词` }}
                </span>
              </div>
            </template>
            <tagcloud
              :tags="queryHotWordList"
              :height="161"
              @clickEchart="clickEchart"
              v-if="queryHotWordList.length"
            />
            <a-empty style="margin-top: 67px" v-else />
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import 'ant-design-vue/dist/antd.less';
import { defineComponent, reactive, ref, createVNode, computed, toRaw, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message } from 'ant-design-vue';
import bar from '@/components/charts/bar/index.vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { Modal } from 'ant-design-vue';
// import PublicPageSearch from '@/views/intelligent-analysis/components/public-page-search/index.vue';
import warningPie from '@/views/early-warning/four-color-warning/components/early-warning-pie.vue';
import { classifyOptions, callOptions, dealOptions } from '@/views/early-warning/js/pieStyle';
import tagcloud from '@/components/charts/tag-cloud/index.vue';
import TimelineChart from '@/components/charts/line/index.vue';
import { BrokenLineItem } from '../../district-monitoring/jurisdiction-list/typing';
import moment from 'moment';
import bilinear from '@/components/charts/bilinear/index.vue';
import barEcharts from './components/barEcharts.vue';
import transverseBar from '@/components/charts/transverseBar/index.vue';
import {
  queryThemeBarStat,
  queryAyConfigStat,
  groupStat,
  timeStat,
  queryFeatureLatest,
  updateAiTypeCallAy,
  queryHotWord,
  updateAiTypeDealAy,
  queryAiTypeAy,
} from '@/api/intelligentanalysis/echarts';
import { getParamList } from '@/api/intelligentanalysis/alert';
// import drawer from './components/drawer.vue';
// import list from '@/components/police-list-drawer/index.vue';
// import PoliceListDrawer from '@/components/police-list-drawer/index.vue';
// import PopoverSelect from '@/components/popover-select/index.vue';
import html2canvas from 'html2canvas';
import JSZipUtils from 'jszip-utils';
import docxtemplater from 'docxtemplater';
import { saveAs } from 'file-saver';
import PizZip from 'pizzip';
import ImageModule from 'docxtemplater-image-module-free';
import { PublicQueryState } from '@/views/intelligent-analysis/typing';
// import { getInitParams } from '@/views/intelligent-analysis/js/publicQuery';
import { omit, isNil } from 'lodash';
import { dateFormatLastYear } from '@/utils/date-util';
import barTime from '@/views/early-warning/current-alarm/components/bar.vue';
import { useStore } from 'vuex';
import {
  increase,
  personnelAge,
  sort,
  thJudge,
  base64DataURLToArrayBuffer,
  plusSymbol,
  top,
  base64,
  groupFieldTime,
} from '@/views/intelligent-analysis/typing';
export default defineComponent({
  components: {
    bar,
    TimelineChart,
    // drawer,
    warningPie,
    // list,
    tagcloud,
    bilinear,
    // PoliceListDrawer,
    // PopoverSelect,
    barEcharts,
    transverseBar,
    // PublicPageSearch,
    barTime,
  },
  setup() {
    const store = useStore();
    const spinning = ref<boolean>(true);
    const carouselData = ref<any>();
    const topicType = ref<string>('ai');
    const checkedKeysLeft = ref<any[]>([]);
    const checkedKeysRight = ref<any[]>([]);
    const ayName = ref<any>('');
    const tabVisible = ref<boolean>(false);
    const policeTabs = ref<Array<any>>([]);
    const visible = ref<boolean>(false);
    const dots = ref<boolean>(false);
    const listTile = ref<string>('');
    const portionUrl = ref<string>('');
    const params = ref<any>([{}]);
    const router = useRouter();
    const queryForm = ref<any>();
    const authXqdwName = ref<string>(store.getters[`user/info`].authXqdwName);
    const previewList = ref<any>({
      authXqdwName: authXqdwName,
      authXqdwNames: authXqdwName.value.indexOf('派出所') != -1 ? '综合指挥室' : '指挥中心',
      year: moment().format('YYYY'),
      month: moment().format('MM'),
      exportData: moment().format('YYYY年MM月DD日'),
      dateRange: '',
      tovalue: '',
      nameChange: [],
      personnelLeft: [],
      personnelRight: [],
      dealList: [],
      aitovalue: '',
      cttovalue: '',
    });

    const dealFlag = ref<any>();
    //导航栏
    let navData = ref<Array<any>>([]);
    //智能分类分析
    const classifyList = ref<any>([]);
    //警情（接警）
    const aiCallList = ref<any>([]);
    // 警情（反馈）
    const aiDealList = ref<any>([]);
    const aiCaseNum = ref<any>('0');
    //警情辖区单位分布
    const aiTrendList = ref<any>({});
    let result = ref<any>({});
    const getCallSummaryCodes = () => {
      return result.value?.callList.map(o => o.callSummaryCode).toString();
    };
    const getDealSummaryCodes = () => {
      return result.value?.dealList.map(o => o.dealSummaryCode).toString();
    };
    const handlequeryThemeBarStat = () => {
      spinning.value = true;
      queryThemeBarStat(queryForm.value)
        .then(res => {
          navData.value = res.data.aiXqdwList;
          classifyList.value = res.data.classifyList;
          aiCallList.value = res.data.aiCallList;
          aiDealList.value = res.data.aiDealList;
          aiCaseNum.value = res.data.aiCaseNum;
          aiTrendList.value = res.data.aiTrendList;
          result.value = res.data;
          const percentage = parseInt(result.value.increaseNum) / parseInt(result.value.ayCaseNum);
          previewList.value.tovalue = result.value.callList
            ? '通过系统分析，' +
              codeNames.value +
              '辖区接警数为' +
              result.value.ayCaseNum +
              '起，AI模型识别为' +
              aiCaseNum.value +
              '起，增量' +
              increase(result.value.increaseNum) +
              '起。较原始警情增幅' +
              increase(Math.round(percentage * 100)) +
              '%。'
            : '通过系统分析，' + analysisName.value + 'AI模型识别为' + aiCaseNum.value + '起。';

          if (result.value.xqdwList) {
            for (let index = 0; index < 5; index++) {
              if (navData.value[index].xqdwName != result.value.xqdwList[index].xqdwName) {
                previewList.value.nameChange.push(navData.value[index].xqdwName);
              }
            }
            previewList.value.cttovalue = thJudge(
              result.value.trendList.chainPercent,
              result.value.trendList.yoyPercent,
            );
          }

          previewList.value.aitovalue = thJudge(
            aiTrendList.value.chainPercent,
            aiTrendList.value.yoyPercent,
          );

          res.data.aiXqdwList || [];
          differenceData.xqdwList = res.data.xqdwList || [];
          differenceData.sameXqdwStat = res.data.sameXqdwStat || [];
          differenceData.xqdwTop = res.data.xqdwTop || [];
          ayName.value = res.data.ayName;
        })
        .catch(err => {
          console.log(err);
        })
        .finally(() => {
          spinning.value = false;
        });
    };
    //差异柱状图
    const differenceData = reactive({
      aiXqdwList: [],
      xqdwList: [],
      sameXqdwStat: [],
      xqdwTop: [],
    });

    // 是否展示差异柱状图
    const visibleDifference = computed(() => {
      const visble = differenceData.xqdwTop.length > 0;
      return visble;
    });
    const title = ref<any>('');
    //tree搜索
    const treeData = ref<any>([
      {
        name: '全选',
        key: '0',
        code: '0',
        children: [],
      },
    ]);
    const newtreeData = ref([
      {
        name: '全选',
        key: '0',
        code: '0',
        children: [],
      },
    ]);
    const gDate = ref<any>([
      {
        name: '全选',
        key: '0',
        children: [],
      },
    ]);

    let autoExpandParent = ref(true);
    let dataList = ref([]);

    //点击查询
    const handleQuery = value => {
      let obj = {
        classifyCode: queryForm.value.themeCode,
        ay: value.toString(),
      };
      updateAiTypeCallAy(obj).then(res => {
        if (res.code == 200) {
          message.success('设置接警类别成功');
          handlequeryAiTypeAy();
          handlequeryAyConfigStat();
        }
      });
    };
    const handleQueryRight = value => {
      let obj = {
        classifyCode: queryForm.value.themeCode,
        ay: value.toString(),
      };
      updateAiTypeDealAy(obj).then(res => {
        if (res.code == 200) {
          message.success('设置接警类别成功');
          handlequeryAiTypeAy();
          handlequeryAyConfigStat();
        }
      });
    };

    //设置统计数据
    const statistics = ref<any>({});
    const handlequeryAyConfigStat = () => {
      queryAyConfigStat(queryForm.value).then(res => {
        statistics.value = res.data;
      });
    };
    const trendList = ref<BrokenLineItem>();
    //人员年龄段分析
    const pieData = ref<any>();
    const pieDatatwo = ref<any>();
    const xqdwList = ref<any>();
    //警情分析
    const analysisName = ref<any>('');
    const codeNames = ref<any>('');
    const callTree = ref<any>([]);
    const handlegetParamList = () => {
      getParamList({}).then(res => {
        treeData.value[0].children = res.data.callTree;
        newtreeData.value[0].children = res.data.callTree;
      });
    };
    //人员分析
    const personnelLeft = ref<any>({});
    const personnelRight = ref<any>({});
    const handlegroupStat = () => {
      let obj = {
        ...queryForm.value,
        groupField: 'sex',
      };
      let obj2 = {
        ...queryForm.value,
        groupField: 'ageGroup',
      };
      groupStat(obj).then(res => {
        personnelRight.value = res.data;
        previewList.value.personnelRight = personnelAge(personnelRight.value, 1);
      });
      groupStat(obj2).then(res => {
        personnelLeft.value = res.data;
        previewList.value.personnelLeft = personnelAge(personnelLeft.value, 1);
      });
    };
    //报警时间分析
    const dealList = ref<any>([]);
    const groupField = ref<string>('dayRange');
    const handleChange = value => {
      groupField.value = value;
      handletimeStat();
    };
    const handletimeStat = () => {
      const params = {
        ...queryForm.value,
        groupField: groupField.value,
      };
      timeStat(params).then(res => {
        dealList.value = res.data;
        previewList.value.dealList = sort(dealList.value, 'value').slice(0, 3);
      });
    };

    //串并新发警情提示
    const arr = ref<any>([
      {
        name: 1,
      },
      {
        name: 2,
      },
    ]);
    const handlequeryFeatureLatest = () => {
      queryFeatureLatest().then(res => {
        carouselData.value = res.data.list.slice(0, 3);
        arr.value = res.data.list.slice(0, 10);
        carouselTime.value = [res.data.callTimeStart, res.data.callTimeEnd];
      });
    };
    // 点击接警所覆盖类别
    const handlepolice = (e: any) => {
      if (!isNil(e?.target?.dataIndex)) {
        visible.value = true;
        topicType.value = 'ai';
        listTile.value = aiCallList.value[e.target.dataIndex].callSummaryName;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          ...omit(queryForm.value, ['classifyNames', 'themeCode', 'callSummaryCodes']),
          callSummaryCode: aiCallList.value[e.target.dataIndex].callSummaryCode,
          page: 1,
          size: 10,
        };
      }
    };
    /**
     * 点击传统接警 以下`nrFlag`为`dealFlag`
     * 如果`nrFlag`为1则将接警饼图数据选中的code传到 `callSummaryCodes` 参数中，
     * 如果为2则将反馈饼图全部数据中的code传到 `dealSummaryCodes` 参数中并且需要将当前点击的接警code传到 `callSummaryCodes` 参数中。
     */
    const handlepoliceEl = (e: any) => {
      if (!isNil(e?.target?.dataIndex)) {
        visible.value = true;
        listTile.value = result.value.callList[e.target.dataIndex].callSummaryName;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        const callSummaryCode = result.value.callList[e.target.dataIndex].callSummaryCode;
        const dealSummaryCodes = getDealSummaryCodes();
        params.value = {
          ...omit(queryForm.value, [
            'classifyNames',
            'classifyCodes',
            'themeCode',
            'callSummaryCodes',
          ]),
          callSummaryCode,
          page: 1,
          size: 10,
        };
        if (Number(queryForm.value.dealFlag) === 2) {
          params.value.dealSummaryCodes = dealSummaryCodes;
        }
      }
    };
    //点击智能分类分析
    const classification = (e: any) => {
      if (!isNil(e?.target?.dataIndex)) {
        visible.value = true;
        topicType.value = 'ai';
        listTile.value = classifyList.value[e.target.dataIndex].classifyName;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          ...queryForm.value,
          classifyCodes: classifyList.value[e.target.dataIndex].classifyCode,
          page: 1,
          size: 10,
        };
      }
    };
    // 反馈所覆盖类别
    const pieClickHandle = (e: any) => {
      if (!isNil(e?.target?.dataIndex)) {
        visible.value = true;
        topicType.value = 'ai';
        listTile.value = aiDealList.value[e.target.dataIndex].dealSummaryName;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        params.value = {
          ...omit(queryForm.value, ['classifyNames', 'themeCode', 'dealSummaryCodes']),
          dealSummaryCode: aiDealList.value[e.target.dataIndex].dealSummaryCode,
          page: 1,
          size: 10,
        };
      }
    };
    /**
     *点击传统反馈以下`nrFlag`为`dealFlag`
     *如果`ngFlag`为1则将接警饼图全部数据中的code传到`callSummaryCodes`参数中，并且需要将当前点击的反馈code传到`dealSummaryCodes`参数中。
     *如果为2则将反馈饼图数据中选中的code传到`dealSummaryCodes`参数中。
     */
    const handlefeedback = (e: any) => {
      if (!isNil(e?.target?.dataIndex)) {
        visible.value = true;
        listTile.value = result.value.dealList[e.target.dataIndex].dealSummaryName;
        portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
        const callSummaryCodes = getCallSummaryCodes();
        const dealSummaryCode = result.value.dealList[e.target.dataIndex].dealSummaryCode;
        params.value = {
          ...omit(queryForm.value, [
            'classifyNames',
            'classifyCodes',
            'themeCode',
            'dealSummaryCodes',
          ]),
          dealSummaryCode,
          page: 1,
          size: 10,
        };

        if (Number(queryForm.value.dealFlag) === 1) {
          params.value.callSummaryCodes = callSummaryCodes;
        }
      }
    };
    //点击热词
    const clickEchart = value => {
      visible.value = true;
      listTile.value = value.name;
      topicType.value = 'ai';
      portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
      params.value = {
        ...queryForm.value,
        hotwords: value.name,
        inputParams: value.name,
        page: 1,
        size: 10,
      };
    };
    //点击报警时间段
    const chartClickHandleTime = (e: any) => {
      visible.value = true;
      topicType.value = 'ai';
      listTile.value = dealList.value[e].name;
      portionUrl.value = '/aitype/persona/queryPersonCaseList';
      params.value = {
        ...queryForm.value,
        groupField: groupField.value,
        date: dealList.value[e].mark,
        page: 1,
        size: 10,
      };
    };
    //点击警情辖区单位分布
    const handleJurisdiction = (e: any) => {
      visible.value = true;
      listTile.value = navData.value[e].xqdwName;
      topicType.value = 'ai';
      portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
      params.value = {
        ...omit(queryForm.value, ['classifyNames', 'themeCode', 'xqdwCodes']),
        xqdwCode: navData.value[e].xqdwCode,
        page: 1,
        size: 10,
      };
    };

    //辖区单位分布对比点击
    const handleBar = (e: any) => {
      if (e.xqdwCodes) {
        const paramsList = [
          {
            name: '智能分类',
            url: '/aitype/caseInfo/queryCompareCaseInfo',
            params: reactive({
              ...omit(queryForm.value, ['classifyNames', 'xqdwCodes']),
              compareType: 'ai',
              page: 1,
              size: 10,
              xqdwCode: e.xqdwCodes,
            }),
            type: 'ai',
          },
          {
            name: '传统分类',
            url: '/aitype/caseInfo/queryCompareCaseInfo',
            params: reactive({
              ...omit(queryForm.value, ['classifyNames', 'xqdwCodes']),
              searchType: 1,
              compareType: 'ay',
              page: 1,
              size: 10,
              xqdwCode: e.xqdwCodes,
            }),
            type: 'ct',
          },
          {
            name: '相同数据',
            url: '/aitype/caseInfo/queryCompareCaseInfo',
            params: reactive({
              ...omit(queryForm.value, ['classifyNames', 'xqdwCodes']),
              compareType: 'same',
              page: 1,
              size: 10,
              xqdwCode: e.xqdwCodes,
            }),
            type: 'ai',
          },
        ];
        tabVisible.value = true;
        drawerName.value = `【${analysisName.value}-${e.xqdwName}】警情智能、传统数量差异统计`;
        policeTabs.value = paramsList;
      }
    };
    // 传统警情辖区单位分布
    const handleJurisdictionEl = (e: any) => {
      visible.value = true;
      topicType.value = 'ct';
      listTile.value = result.value.xqdwList[e].xqdwName;
      portionUrl.value = '/aitype/caseInfo/queryCaseInfo';
      params.value = {
        ...omit(queryForm.value, ['classifyNames', 'classifyCodes', 'themeCode', 'xqdwCodes']),
        xqdwCode: result.value.xqdwList[e].xqdwCode,
        searchType: 1,
        page: 1,
        size: 10,
        type: 'ct',
      };
      const callSummaryCodes = getCallSummaryCodes();
      const dealSummaryCodes = getDealSummaryCodes();
      if (Number(queryForm.value.dealFlag) === 1) {
        params.value.callSummaryCodes = callSummaryCodes;
      } else {
        params.value.dealSummaryCodes = dealSummaryCodes;
      }
    };
    //点击人员年龄
    const handleManage = value => {
      visible.value = true;
      listTile.value = value.name;
      portionUrl.value = '/aitype/persona/queryPersonCaseList';
      topicType.value = 'ai';
      params.value = {
        ...queryForm.value,
        age: value.name,
        page: 1,
        size: 10,
      };
    };
    //点击人员性别
    const handleSex = value => {
      visible.value = true;
      topicType.value = 'ai';
      listTile.value = value.name;
      portionUrl.value = '/aitype/persona/queryPersonCaseList';
      params.value = {
        ...queryForm.value,
        sex: value.name,
        page: 1,
        size: 10,
      };
    };
    const drawerName = ref<any>('');
    // 点击 AI警情趋势分析
    const chartClickLine = (index, item) => {
      tabVisible.value = true;
      drawerName.value = `智能${analysisName.value}${item.dataDate}`;
      const lastYearStart = `${dateFormatLastYear(item.dataDate)} 00:00:00`;
      const lastYearEnd = `${dateFormatLastYear(item.dataDate)} 23:59:59`;
      const paramsList = [
        {
          name: '当期警情',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...queryForm.value,
            callTimeStart: `${item.dataDate} 00:00:00`,
            callTimeEnd: `${item.dataDate} 23:59:59`,
            page: 1,
            size: 10,
          }),
          type: 'ai',
        },
        {
          name: '去年同期',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...queryForm.value,
            callTimeStart: lastYearStart,
            callTimeEnd: lastYearEnd,
            page: 1,
            size: 10,
          }),
          type: 'ai',
        },
      ];
      policeTabs.value = paramsList;
    };
    // 点击 警情智能、传统对比趋势图
    const chartClickLinecontrast = (index, item) => {
      tabVisible.value = true;
      drawerName.value = `${analysisName.value}警情智能、传统对比test${item.dataDate}`;
      const paramsList = [
        {
          name: '智能',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...queryForm.value,
            callTimeStart: `${item.dataDate} 00:00:00`,
            callTimeEnd: `${item.dataDate} 23:59:59`,
            page: 1,
            size: 10,
          }),
          type: 'ai',
        },
        {
          name: '传统',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...omit<PublicQueryState>(toRaw(queryForm.value), [
              'classifyNames',
              'classifyCodes',
              'themeCode',
            ]),
            searchType: 1,
            callTimeStart: `${item.dataDate} 00:00:00`,
            callTimeEnd: `${item.dataDate} 23:59:59`,
            page: 1,
            size: 10,
          }),
          type: 'ct',
        },
      ];
      const callSummaryCodes = getCallSummaryCodes();
      const dealSummaryCodes = getDealSummaryCodes();

      if (Number(queryForm.value.dealFlag) === 1) {
        paramsList[1].params.callSummaryCodes = callSummaryCodes;
      } else {
        paramsList[1].params.dealSummaryCodes = dealSummaryCodes;
      }

      policeTabs.value = paramsList;
    };

    // 传统警情趋势分析
    const chartClickLineEl = (index, item) => {
      tabVisible.value = true;
      drawerName.value = `传统${analysisName.value}${item.dataDate}`;
      const lastYearStart = `${dateFormatLastYear(item.dataDate)} 00:00:00`;
      const lastYearEnd = `${dateFormatLastYear(item.dataDate)} 23:59:59`;
      const parmas = omit<PublicQueryState>(toRaw(queryForm.value), [
        'classifyNames',
        'classifyCodes',
        'themeCode',
      ]);
      const paramsList = [
        {
          name: '当期警情',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...parmas,
            searchType: 1,
            callTimeStart: `${item.dataDate} 00:00:00`,
            callTimeEnd: `${item.dataDate} 23:59:59`,
            page: 1,
            size: 10,
          }),
        },
        {
          name: '去年同期',
          url: '/aitype/caseInfo/queryCaseInfo',
          params: reactive({
            ...parmas,
            searchType: 1,
            callTimeStart: lastYearStart,
            callTimeEnd: lastYearEnd,
            page: 1,
            size: 10,
          }),
        },
      ];
      const callSummaryCodes = getCallSummaryCodes();
      const dealSummaryCodes = getDealSummaryCodes();
      if (Number(queryForm.value.dealFlag) === 1) {
        paramsList[0].params.callSummaryCodes = callSummaryCodes;
        paramsList[1].params.callSummaryCodes = callSummaryCodes;
      } else {
        paramsList[0].params.dealSummaryCodes = dealSummaryCodes;
        paramsList[1].params.dealSummaryCodes = dealSummaryCodes;
      }
      policeTabs.value = paramsList;
    };
    //警情热词
    const queryHotWordList = ref<any>([]);
    const handlequeryHotWord = () => {
      queryHotWord(queryForm.value).then(res => {
        queryHotWordList.value = res.data.map(item => {
          return {
            name: item.hotWord,
            value: item.heat,
          };
        });
      });
    };
    const handlequeryAiTypeAy = () => {
      queryAiTypeAy({ classifyCode: queryForm.value.themeCode }).then(res => {
        if (res.data.callAy && res.data.callAy.length > 1) {
          checkedKeysLeft.value = res.data.callAy.split(',');
        } else {
          checkedKeysLeft.value = [res.data.callAy];
        }
        if (res.data.dealAy && res.data.dealAy.length > 1) {
          checkedKeysRight.value = res.data.dealAy.split(',');
        } else {
          checkedKeysRight.value = [res.data.dealAy];
        }
      });
    };
    // 打开抽屉
    const RefChilde = ref();
    const showDrawer = () => {
      RefChilde.value.showDrawer();
    };

    const imageOpts = ref<any>([]);
    const indexID = ref<any>([]);

    //报告导出
    const saveImgClick = () => {
      Modal.confirm({
        title: '提示',
        icon: createVNode(ExclamationCircleOutlined),
        content: '是否导出报告？',
        okText: '确认',
        cancelText: '取消',
        onOk() {
          spinning.value = !spinning.value;
          setTimeout(() => {
            saveImg();
          }, 500);
        },
      });
    };

    const startTime = ref();
    const endTime = ref();
    const ifValue = (index: number, image: string) => {
      if (index === 0) {
        const increase = num => {
          if (num < 0) {
            return ' ' + num;
          } else {
            return num;
          }
        };
        const percentage = parseInt(result.value.increaseNum) / parseInt(result.value.ayCaseNum);
        const tovalue =
          '通过系统分析，' +
          codeNames.value +
          '辖区接警数为' +
          result.value.ayCaseNum +
          '起，AI模型识别为' +
          aiCaseNum.value +
          '起，增量' +
          increase(result.value.increaseNum) +
          '起。较原始警情增幅' +
          increase(Math.round(percentage * 100)) +
          '%。';
        return {
          Template0: {
            codeNames: codeNames.value,
            name: '一、' + codeNames.value + '警情AI识别',
            image: image,
            total: {
              aiCaseNum: aiCaseNum.value,
              ayCaseNum: result.value.ayCaseNum,
              tovalue: result.value.callList
                ? tovalue
                : '通过系统分析，' + analysisName.value + 'AI模型识别为' + aiCaseNum.value + '起。',
            },
            valueName:
              analysisName.value === '全部' ? '通过AI识别，' + codeNames.value + '警情中' : '',
            valueAI:
              analysisName.value === '全部' ? plusSymbol(classifyList.value.slice(0, 3)) : '',
            valueJQ: plusSymbol(aiCallList.value.slice(0, 3)),
            valueFK: plusSymbol(aiDealList.value.slice(0, 3)),
          },
        };
      } else if (index === 1) {
        const chainPercent = result.value.trendList.chainPercent;
        const yoyPercent = result.value.trendList.yoyPercent;
        return {
          Template1: {
            codeNames: codeNames.value,
            name: '二、' + codeNames.value + '警情AI趋势分析',
            image: image,
            total: {
              caseNum: result.value.trendList.caseNum,
              chainPercent:
                parseFloat(chainPercent) > 0
                  ? '上升' + chainPercent
                  : chainPercent == '-'
                  ? chainPercent + '%'
                  : '下降' + chainPercent.split('-')[1], //环比
              yoyPercent:
                parseFloat(yoyPercent) > 0
                  ? '上升' + yoyPercent
                  : yoyPercent == '-'
                  ? yoyPercent + '%'
                  : '下降' + yoyPercent.split('-')[1], //同比
            },
          },
        };
      } else if (index === 2) {
        const chainPercent = result.value.aiTrendList.chainPercent;
        const yoyPercent = result.value.aiTrendList.yoyPercent;
        return {
          Template2: {
            name: result.value.callList ? '' : '二、' + codeNames.value + '警情AI趋势分析',
            codeNames: codeNames.value,
            image: image,
            total: {
              caseNum: result.value.aiTrendList.caseNum,
              chainPercent:
                parseFloat(chainPercent) > 0
                  ? '上升' + chainPercent
                  : chainPercent == '-'
                  ? chainPercent + '%'
                  : '下降' + chainPercent.split('-')[1], //环比
              yoyPercent:
                parseFloat(yoyPercent) > 0
                  ? '上升' + yoyPercent
                  : yoyPercent == '-'
                  ? yoyPercent + '%'
                  : '下降' + yoyPercent.split('-')[1], //同比
            },
          },
        };
      } else if (index === 3) {
        return {
          Template3: {
            codeNames: codeNames.value,
            image: image,
          },
        };
      } else if (index === 4) {
        return {
          Template4: {
            codeNames: codeNames.value,
            name: '三、' + codeNames.value + '警情辖区分布',
            image: image,
            top: top(5, result.value.xqdwList.slice(0, 5).length),
            total: {
              caseNum: result.value.trendList.caseNum,
            },
            value: result.value.xqdwList.slice(0, 5),
          },
        };
      } else if (index === 5) {
        const nameChange = ref<any>([]);
        const content = ref<string>('');
        if (result.value.callList) {
          for (let index = 0; index < 5; index++) {
            if (navData.value[index].xqdwName != result.value.xqdwList[index].xqdwName) {
              nameChange.value.push(navData.value[index].xqdwName);
            }
          }
          nameChange.value.forEach((item, index) => {
            if (index + 1 == nameChange.value.length) {
              content.value += '“' + item + '”';
            } else {
              content.value += '“' + item + '”、';
            }
          });
        }
        return {
          Template5: {
            name: result.value.callList ? '' : '三、' + codeNames.value + '警情辖区分布',
            codeNames: codeNames.value,
            image: image,
            top: top(5, navData.value.slice(0, 5).length),
            total: {
              aiCaseNum: aiCaseNum.value,
              content: result.value.callList
                ? '其中' + content.value + '排名较人工接警排名有变化，请关注。'
                : '',
            },
            value: navData.value.slice(0, 5),
          },
        };
      } else if (index === 6) {
        return {
          Template6: {
            codeNames: codeNames.value,
            image: image,
          },
        };
      } else if (index === 7) {
        return {
          Template7: {
            codeNames: codeNames.value,
            name: '四、' + codeNames.value + '警情AI要素分析',
            image: image,
            value: personnelAge(personnelLeft.value, 1),
          },
        };
      } else if (index === 8) {
        return {
          Template8: {
            codeNames: codeNames.value,
            image: image,
            value: personnelAge(personnelRight.value, 2),
          },
        };
      } else if (index === 9) {
        return {
          Template9: {
            codeNames: codeNames.value,
            image: image,
            top: top(3, dealList.value.slice(0, 3).length),
            value: sort(dealList.value, 'value').slice(0, 3),
          },
        };
      } else if (index === 10) {
        return {
          Template10: {
            codeNames: codeNames.value,
            image: image,
            top: top(10, queryHotWordList.value.slice(0, 10).length),
            value: queryHotWordList.value.slice(0, 10),
          },
        };
      }
    };

    const saveImg = () => {
      startTime.value = new Date().getTime();
      imageOpts.value = [];
      if (result.value.callList) {
        indexID.value = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      } else {
        indexID.value = [0, 2, 5, 7, 8, 9, 10];
      }
      imageOpts.value[0] = {
        top: {
          codeNames: codeNames.value,
          title: authXqdwName.value,
          command: authXqdwName.value.indexOf('派出所') != -1 ? '综合指挥室' : '指挥中心',
          ctCaseNum: result.value.ctCaseNum,
          month: moment().format('MM'),
          exportData: moment().format('YYYY年MM月DD日'),
          dateRange:
            moment(queryForm.value.callTimeStart).format('YYYY年MM月DD日HH时') +
            '至' +
            moment(queryForm.value.callTimeEnd).format('YYYY年MM月DD日HH时'),
        },
      };
      document.documentElement.scrollTop = 0;
      document.body.scrollTop = 0;
      indexID.value.forEach((item, index) => {
        var node = ref<any>(document.getElementById('mycanvas' + item)); //传入的id名称
        var width = node.value.offsetWidth; //dom宽
        var height = node.value.offsetHeight; //dom高
        var scale = 2; //放大倍数 这个相当于清晰度 调大一点更清晰一点
        html2canvas(node.value, {
          width: width,
          height: height,
          backgroundColor: '#ffffff', //背景颜色 为null是透明
          scale: scale,
          x: 0,
          y: 0,
          scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
          scrollY: 0,
          useCORS: true, //是否使用CORS从服务器加载图像 !!!
          allowTaint: true, //是否允许跨域图像污染画布  !!!
        }).then(canvas => {
          imageOpts.value[index + 1] = ifValue(item, canvas.toDataURL());
          if (index + 1 == indexID.value.length) {
            exportWord();
          }
        });
      });
    };
    const exportWord = () => {
      // 判断有无附加商品来选择word模版
      // 读取并获得模板文件的二进制内容
      JSZipUtils.getBinaryContent(
        (window as any).g.staticUrl + 'docx/AI.docx',
        function (error, content) {
          // input.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
          // 抛出异常
          if (error) {
            throw error;
          }
          let opts = {
            getImage: function (chartId) {
              return base64DataURLToArrayBuffer(chartId);
            },
            getSize: function (img, tagValue) {
              base64(tagValue);
              return [600, 200];
            },
          };
          const imageModule = new ImageModule(opts);
          // 创建一个JSZip实例，内容为模板的内容
          let zip = new PizZip(content);
          // 创建并加载docxtemplater实例对象
          let doc = new docxtemplater();
          doc.loadZip(zip);
          doc.attachModule(imageModule);

          // 设置模板变量的值
          doc.setData({
            // 导出价格表全部信息
            imageOpts: imageOpts.value,
          });
          try {
            // 用模板变量的值替换所有模板变量
            doc.render();
          } catch (error) {
            // 抛出异常
            //   let e = {
            //     message: error.message,
            //     name: error.name,
            //     stack: error.stack,
            //     properties: error.properties,
            //   };
            spinning.value = !spinning.value;
            throw error;
          }
          // 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
          let out = doc.getZip().generate({
            type: 'blob',
            mimeType: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          });
          // 将目标文件对象保存为目标类型的文件，并命名
          saveAs(out, 'AI研判.docx');
          spinning.value = !spinning.value;
          endTime.value = new Date().getTime();
        },
      );
    };

    const carouselTime = ref<Array<string>>([]);
    //走马灯点击事件
    const handlecarousel = value => {
      const lineParams = [
        {
          name: '',
          url: '/series/detail/queryCaseList',
          params: reactive({
            // seriesNo: value.seriesNo,
            featureValue: value.featureValue,
            inputParams: value.featureValue,
            classifyCodes: value.classifyCode,
            callTimeStart: carouselTime.value[0],
            callTimeEnd: carouselTime.value[1],
            subdivisionFlag: 'Y',
            trafficFlag: 'N',
            otherFlag: 'N',
            page: 1,
            size: 50,
            isEssential: true,
          }),
          type: 'ai',
        },
      ];
      drawerName.value = value.featureName;
      policeTabs.value = lineParams;
      tabVisible.value = true;
    };

    onMounted(() => {
      const local = JSON.parse(localStorage.getItem('queryForm') as any);
      queryForm.value = local.queryForm;
      analysisName.value = local.analysisName || '全部';
      codeNames.value = local.codeNames || '全部';
      previewList.value.dateRange =
        moment(queryForm.value.callTimeStart).format('YYYY年MM月DD日HH时') +
        '至' +
        moment(queryForm.value.callTimeEnd).format('YYYY年MM月DD日HH时');

      handlequeryAiTypeAy();
      handlequeryThemeBarStat();
      handlequeryAyConfigStat();
      handlegroupStat();
      handletimeStat();
      handlequeryFeatureLatest();
      handlequeryHotWord();
    });

    return {
      handlecarousel,
      carouselData,
      result,
      spinning,
      checkedKeysLeft,
      checkedKeysRight,
      ayName,
      handleBar,
      differenceData,
      visibleDifference,
      handlefeedback,
      handlepoliceEl,
      clickEchart,
      tabVisible,
      drawerName,
      policeTabs,
      queryHotWordList,
      handleQueryRight,
      chartClickLine,
      handlequeryHotWord,
      listTile,
      params,
      portionUrl,
      visible,
      handleSex,
      handleManage,
      arr,
      handlequeryAiTypeAy,
      handleJurisdiction,
      chartClickHandleTime,
      pieClickHandle,
      classification,
      handlepolice,
      handlequeryFeatureLatest,
      aiTrendList,
      handletimeStat,
      groupField,
      handleChange,
      personnelLeft,
      personnelRight,
      handlegroupStat,
      aiCaseNum,
      statistics,
      handleQuery,
      aiDealList,
      aiCallList,
      title,
      callTree,
      analysisName,
      codeNames,
      pieData,
      pieDatatwo,
      router,
      queryForm,
      trendList,
      dealList,
      xqdwList,
      handlequeryThemeBarStat,
      classifyList,
      navData,
      treeData,
      autoExpandParent,
      chartClickLineEl,
      dataList,
      handleJurisdictionEl,
      gDate,
      newtreeData,
      chartClickLinecontrast,
      showDrawer,
      RefChilde,
      handlegetParamList,
      handlequeryAyConfigStat,
      saveImgClick,
      classifyOptions,
      callOptions,
      dealOptions,
      dealFlag,
      topicType,
      carouselTime,
      dots,
      previewList,
      personnelAge,
      groupFieldTime,
    };
  },
});
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  color: #000 !important;
  background-color: #e6e6e6;
}
.mianColor {
  color: #000;
}
.report {
  width: 80%;
  margin: 50px auto;
  padding: 100px;
  background-color: #fff;
}
//宋体
.sTypeface {
  font-weight: bold;
  font-family: '宋体';
}
//仿宋
.fTypeface {
  font-family: '仿宋';
}
//黑体
.hTypeface {
  font-family: '黑体';
}
//楷体
.kTypeface {
  font-family: '楷体';
}
//小一字体
.smallOne {
  font-size: 24px;
}
//小二字体
.smallTwo {
  font-size: 18px;
}
//三号字体
.numberThree {
  font-size: 16px;
}
.zhDate {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #000;
}
.top {
  width: 100%;
  height: 50px;
  padding: 0px 20px;
  color: #fff;
  background: #34363c;
}
.tabrc {
  width: 60%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #000;
  td {
    border: 1px solid #000;
  }
  th {
    background: #ccc;
    border: 1px solid #000;
  }
}
:deep(.ant-card-head) {
  padding: 0;
  color: #000;
  background: #fff;
  border: 1px solid #f0f0f0;
}
:deep(.ant-card-bordered) {
  border: 1px solid #f0f0f0;
}
:deep(.ant-card) {
  background: #fff;
}
.classificationTile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.icon {
  position: absolute;
  top: -9px;
  left: 1px;
  font-size: 37px;
}
.echatsAI {
  :deep(.ant-card-head) {
    color: #e99220;
    border: 1px solid #e99220;
  }
}
.echatsJie {
  :deep(.ant-card-head) {
    color: #1ccaff;
    border: 1px solid #1ccaff;
  }
}
.echatsFan {
  :deep(.ant-card-head) {
    color: #3191ff;
    border: 1px solid #3191ff;
  }
}
.callSize {
  color: rgba(9, 65, 82, 1);
  font-size: 70px;
  text-shadow: -1px 0 rgba(28, 202, 255, 1), 0 1px rgba(28, 202, 255, 1),
    1px 0 rgba(28, 202, 255, 1), 0 -1px rgba(28, 202, 255, 1);
}
.dealSize {
  color: rgba(20, 55, 96, 1);
  font-size: 70px;
  text-shadow: -1px 0 rgba(49, 145, 255, 1), 0 1px rgba(49, 145, 255, 1),
    1px 0 rgba(49, 145, 255, 1), 0 -1px rgba(49, 145, 255, 1);
}
.green {
  color: #70b603;
  font-weight: 700;
}
</style>
